<template>
    <div id="theAtlas">
      <div class="dirs" >
          <el-menu
                  default-active="1"
                  class="el-menu-vertical-demo"
                  @open="handleOpen"
                  @close="handleClose">
              <el-menu-item index="1" @click="switchImg('基础图')">
                  <i class="el-icon-location"></i>
                  <span >基础图</span>
              </el-menu-item>
              <el-menu-item index="2" @click="switchImg1('生态保护红线')">
                  <i class="el-icon-menu"></i>
                  <span slot="title">生态保护红线</span>
              </el-menu-item>
              <el-menu-item index="3"  @click="switchImg2('环境质量底线')">
                  <i class="el-icon-document"></i>
                  <span slot="title">环境质量底线</span>
              </el-menu-item>
              <el-menu-item index="4" @click="switchImg3('资源利用上线')" >
                  <i class="el-icon-setting"></i>
                  <span slot="title">资源利用上线</span>
              </el-menu-item>
              <el-menu-item index="5"  @click="switchImg4('环境管控单元')">
                  <i class="el-icon-search" ></i>
                  <span slot="title">环境管控单元</span>
              </el-menu-item>
          </el-menu>

      </div>
      <div id="atlasimgs">
           <div class="broad">
                <el-breadcrumb separator=">">
                    <el-breadcrumb-item >目录管理</el-breadcrumb-item>
                    <el-breadcrumb-item>图集成果</el-breadcrumb-item>
                    <el-breadcrumb-item>{{ document }}</el-breadcrumb-item>
                </el-breadcrumb>
           </div>
<!--         <el-scrollbar style="height: 100%">-->
           <div id="imgbox">
                  <div class="block" v-for="url in urlss" :key="url.name">
                      <div class="imgs demo-image__preview" >
                          <el-image
                                  style="width: 370px; height: 400px"
                                  :src='url.url'
                                  :fit="fit"
                                  :preview-src-list="urls" >
                          </el-image>
                          </div>
                      <div class="cont">
                          <span class="demonstration">{{ url.name }}</span>
                          <p class="fabu">发布：管理员</p>
<!--                          <span> {{ url.name + '.jpg'}}</span>-->
                          <span>数据大小：100kb</span> <a :href ="url.url"  :download="url.name">下载</a>
                      </div>

                  </div>
           </div>
<!--         </el-scrollbar>-->
      </div>
    </div>
</template>

<script>
    export default {
        name: "TheAtlas" ,
        data(){
            return {
                 fit:'fill',
                 document:'基础图',
                 fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
                 urls : [require('../../assets/img/imge/timg.jpg'),require('../../assets/img/imge/timg2.jpg'),require('../../assets/img/imge/timg4.jpg'),
                         require('../../assets/img/imge/timg3.jpg'),require('../../assets/img/imge/timg5.jpg'),require('../../assets/img/imge/timg6.jpg'),
                         require('../../assets/img/imge/timg7.jpg'),require('../../assets/img/imge/timg8.jpg'),require('../../assets/img/imge/timg9.jpg')],
                 urlss:[
                     {
                        name:'1',
                        url:require('../../assets/img/imge/timg.jpg')
                     },
                     {
                         name:'2',
                         url:require('../../assets/img/imge/timg2.jpg')
                     },
                     {
                         name:'3',
                         url:require('../../assets/img/imge/timg3.jpg')
                     },
                     {
                         name:'4',
                         url:require('../../assets/img/imge/timg4.jpg')
                     },
                     {
                         name:'5',
                         url:require('../../assets/img/imge/timg5.jpg')
                     },
                     {
                         name:'6',
                         url:require('../../assets/img/imge/timg6.jpg')
                     },
                     {
                         name:'7',
                         url:require('../../assets/img/imge/timg7.jpg')
                     },
                     {
                         name:'8',
                         url:require('../../assets/img/imge/timg8.jpg')
                     },
                     {
                         name:'9',
                         url:require('../../assets/img/imge/timg9.jpg')
                     },
                 ]
            }
        },
        methods:{
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            switchImg(name){
                this.document = name;
                this.urlss = [{
                    name:'1',
                    url:require('../../assets/img/imge/timg.jpg')
                },
                    {
                        name:'2',
                        url:require('../../assets/img/imge/timg2.jpg')
                    },
                    {
                        name:'3',
                        url:require('../../assets/img/imge/timg3.jpg')
                    },

                    {
                        name:'4',
                        url:require('../../assets/img/imge/timg4.jpg')
                    },
                    {
                        name:'5',
                        url:require('../../assets/img/imge/timg5.jpg')
                    },
                    {
                        name:'6',
                        url:require('../../assets/img/imge/timg6.jpg')
                    },
                    {
                        name:'7',
                        url:require('../../assets/img/imge/timg7.jpg')
                    },
                    {
                        name:'8',
                        url:require('../../assets/img/imge/timg8.jpg')
                    },
                    {
                        name:'9',
                        url:require('../../assets/img/imge/timg9.jpg')
                    },]
            },
            switchImg1(name){
                this.document = name;
                this.urlss = [{
                    name:'1',
                    url:require('../../assets/img/imge/timg.jpg')
                },
                    {
                        name:'2',
                        url:require('../../assets/img/imge/timg2.jpg')
                    },
                    {
                        name:'3',
                        url:require('../../assets/img/imge/timg3.jpg')
                    }]
            },
            switchImg2(name){
                this.document = name;
                this.urlss = [{
                    name:'1',
                    url:require('../../assets/img/imge/timg.jpg')
                },
                    {
                        name:'8',
                        url:require('../../assets/img/imge/timg8.jpg')
                    },
                    {
                        name:'9',
                        url:require('../../assets/img/imge/timg9.jpg')
                    },]
            },
            switchImg3(name){
                this.document = name;
                this.urlss = [{
                    name:'1',
                    url:require('../../assets/img/imge/timg.jpg')
                },
                    {
                        name:'5',
                        url:require('../../assets/img/imge/timg5.jpg')
                    },
                    {
                        name:'7',
                        url:require('../../assets/img/imge/timg6.jpg')
                    },]
            },
            switchImg4(name){
                this.document = name;
                this.urlss = [{
                    name:'1',
                    url:require('../../assets/img/imge/timg.jpg')
                },
                    {
                        name:'4',
                        url:require('../../assets/img/imge/timg4.jpg')
                    },
                    {
                        name:'5',
                        url:require('../../assets/img/imge/timg5.jpg')
                    },{
                        name:'8',
                        url:require('../../assets/img/imge/timg8.jpg')
                    }]
            },
        }
    }

</script>

<style scoped>
    .fabu{
      margin: 0;
    }
    a{
      text-decoration-line: none;
      margin-left: 160px;
    }
    #theAtlas{
      position: absolute;
      left: 15.5%;
      /*height: 87%;*/
      top: 9.5%;
      bottom: 1.5%;
      width: 84%;
      /*background-color: #ffffff;*/
      border-radius: 8px;
    }
    /deep/.el-menu{
      width: 100%;
    }
    .dirs{
      position: absolute;
      width: 20%;
      height:100%;
      background-color: white;
      border-left:2px #E9EEF3 solid ;
      overflow: hidden;
      border-radius: 8px;
    }
    #atlasimgs{
      position: absolute;
      left: 20.5%;
      width: 79.5%;
      height: 100%;
      /*overflow: auto;*/
      background-color: #ffffff;
      border-radius: 8px;
    }
    .broad{
      position: absolute;
      width: 98%;
      display: inline-block;
      padding: 1%;
      color: black;
      font-size: 20px;
      border-bottom: 2px solid #e9eef3;
      background-color: #ffffff;
      border-radius: 8px 8px 0 0 ;
    }
    #imgbox{
      /*padding: 10px;*/
      position: absolute;
      top: 5%;
      height: 95%;
      width: 100%;
      overflow-y:scroll;
      overflow-x: hidden;
    }

/deep/.block{

        margin-left: 10px;
        margin-right: 10px;
        margin-top: 20px;
        display: inline-block;

    }
.demonstration{
    font-size: 18px;
}
    .cont{
        margin-left: 10px;
    }
 /deep/   .el-icon-circle-close{
        color: red;
    }
 a{
     color: black;
 }
 a:hover{
        color: #409EFF;
        cursor: pointer;
    }
.el-icon-setting:before{
    background: url("../../assets/img/band.png") no-repeat 0 0;
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    background-size: 20px;
}
.el-icon-search:before{
    background: url("../../assets/img/Others.png") no-repeat 0 0;
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    font-size: 20px;
    background-size: 20px;
}
.el-icon-document:before{
        background: url("../../assets/img/sddp.png") no-repeat 0 0;
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        font-size: 20px;
        background-size: 20px;
    }
.el-icon-menu:before{
        background: url("../../assets/img/import.png") no-repeat 0 0;
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        font-size: 20px;
        background-size: 20px;
    }
.el-icon-location:before{
        background: url("../../assets/img/narture.png") no-repeat 0 0px;
        content: '';
        display: block;
        width: 20px;
        height: 20px;
        font-size: 20px;
        background-size: 20px;
    }
.el-breadcrumb__item{
        font-size: 16px;
        /*padding-top: 10px;*/
        /*padding-bottom: 10px;*/
        /*padding-right: 2px;*/
        /*padding-left: 2px;*/
    }
/deep/    .el-menu-item.is-active{
   color: #0ce999;
}
.el-menu-item{
        font-size: 16px;

    }
    /*#imgbox{*/
    /*    overflow: auto;*/
    /*    !*position: absolute;*!*/
    /*    top:4.5%;*/
    /*    height:95.5%;*/
    /*    padding: 5px;*/
    /*    background-color: #ffffff;*/
    /*}*/
</style>
